<template>
  <div :ref="chartId" style="width: 100%;height:400px;"></div>  
</template>
<script>
import echarts from 'echarts'
import  _ from 'lodash'
export default {
  props:{
    chartId: {
      type:String,
      default: 'myLine'
    },
    width: String,
    height: String,
    titleText: String,
    legendData: Array,  //name需要和series里的data一致，才会显示
    xData: Array,
    seriesData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data(){
    return{
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend:{
        data:[],
        icon: 'rect',
        bottom: 0,
        left: 'center',
        textStyle:{
          color: '#222222'
        }
      },
      xAxis: {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        data: []
      },
      yAxis: {
        type: 'value',
        axisLine: {show:false},
        axisTick: {show:false},
      }
    }
  },
  watch: {
    seriesData: {
      handler() {
        this.initData()
      },
      immediate: false,
    },
  },
  // mounted(){
  //   this.initData()
  //   console.log(this.seriesData, 'aaaaa')
  // },
  methods:{
    initData(){
      // 父组件传来的数据处理
      this.legend.data = this.legendData
      this.xAxis.data = this.xData
      this.title.text = this.titleText
      const series = this.transformSeries(this.seriesData)
      this.initChart(series)
    },
    initChart(series){
      let myChart = echarts.init(this.$refs[this.chartId])
      const {title,tooltip,legend, xAxis, yAxis} = this
      const option = {
        title,
        tooltip,
        legend,
        yAxis,
        xAxis,
        series
      }
      myChart.setOption(option)
    },
    transformSeries(seriesData){
      let tempSeries = []
      const config = {
        type: 'line',
        smooth: true,
        areaStyle: {},
        symbol: 'circle',
      }
      let itemStyleConfig = {
          borderColor: '#FF6F02',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 192, 0, 0.9)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255, 111, 2, 0.1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
        let lineStyleConfig = {
          color: '#FF6F02'
        }
      tempSeries = seriesData.map( item => {
        const {name,data,borderColor,colorStops, markArea = {}} = item
        let itemStyle = _.cloneDeep(itemStyleConfig)
        let lineStyle = _.cloneDeep(lineStyleConfig)
        itemStyle.borderColor = borderColor
        itemStyle.color.colorStops[0].color = colorStops[0]
        itemStyle.color.colorStops[1].color = colorStops[1]
        lineStyle.color = borderColor
        return  {...config,name,data,itemStyle,lineStyle, markArea}
      })
      return tempSeries
    }
  }
}
</script>
